/**
 * @description  收益性表现（时点信息）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { ThreeHeaderC, XYAxisChartsC, PrimaryGhostC, ModalC, TabC, FirstHeaderC, TableC } from '../../../components';
import styles from './index.less';

class ShowEchartsThree extends PureComponent {
  constructor() {
    super();
    this.state = {
      spliteStatus: false, // 拆分弹窗状态
      tabType1: '1', // 目前选中的tab
      columns: [
        { title: '分类', key: 'classification', dataIndex: 'classification' },
        { title: '0-1D', key: '[0-1D]', dataIndex: 'oneDay' },
        { title: '1D-3M', key: '(1D-3M]', dataIndex: 'threeMonth' },
        { title: '3M-6M', key: '(3M-6M]', dataIndex: 'sixMonth' },
        { title: '6M-1Y', key: '(6M-1Y]', dataIndex: 'oneYear' },
        { title: '1Y-3Y', key: '(1Y-3Y]', dataIndex: 'threeYear' },
        { title: '3Y-5Y', key: '(3Y-5Y]', dataIndex: 'fiveYear' },
        { title: '5Y以上', key: '(5Y--)', dataIndex: 'more' },
      ],
      dataSource: [],
    };
  }

  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'yieldPerformanceM/getEchartsThree',
      payload: args,
    });

    this.getDimensionDisassembly(dispatch, args);
  }

  componentDidUpdate(prevProps) {
    const { dispatch, args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      dispatch({
        type: 'yieldPerformanceM/getEchartsThree',
        payload: args,
      });
      this.getDimensionDisassembly(dispatch, args);
    }
  }

  showEchartsThree = () => {
    const {
      yieldPerformanceM: { echartsThree },
    } = this.props;
    const { xAxis } = echartsThree;
    const { series } = echartsThree;

    return (
      <div style={{ height: '423px', paddingTop: '20px', paddingBottom: '20px' }}>
        <XYAxisChartsC
          series={series}
          xAxis={xAxis}
          height={395}
          dataZoom={true}
          // toolTipDataFormat={[value=>value+'%',value=>value+'%',value=>value+'%']}
          yAxisUnit={['单位(%)']}
          debtAndProfit={true}
          type='line'
        />
      </div>
    );
  };

  // 数字处理
  dealNumber = (data) => {
    return `${(data * 100).toFixed(2)}`;
  };

  // 获取维度拆解数据
  getDimensionDisassembly = (dispatch, args) => {
    dispatch({
      type: 'yieldPerformanceM/getDimensionDisassembly',
      payload: args,
      callback: (res) => {
        const { columns, dataSource } = res;
        // 处理数据
        const dealDataSource = [{}];
        dataSource.map((item) => {
          dealDataSource[0].classification = '收益率（%）';
          dealDataSource[0][item.TTM] = this.dealNumber(item.WEIGHT_CUM_RATE);
        });
        this.setState({
          dataSource: dealDataSource,
        });
      },
    });
  };

  // 维度拆分按钮点击
  handleSplite = (e) => {
    this.setState({
      spliteStatus: true,
    });
  };

  render() {
    const { loading } = this.props;
    const { columns, dataSource } = this.state;
    // 控制维度拆解模态框参数
    const controlSpliteModal = {
      visible: this.state.spliteStatus,
      onCancel: () => {
        this.setState({ spliteStatus: false });
      },
      title: '维度解析',
      width: 800,
      footer: null,
      okButtonProps: {
        disabled: true,
      },
    };

    return (
      <div className={styles.echarts2}>
        <Spin spinning={loading.effects['yieldPerformanceM/getEchartsOne'] == true}>
          <div className={styles.titleChange}>
            <ThreeHeaderC titl·e='大类资产收益率' />
            <PrimaryGhostC title={'维度拆解'} onClick={this.handleSplite} />
            <ModalC {...controlSpliteModal}>
              <FirstHeaderC title={'期限'} />
              <TabC
                type='secondTab'
                tabSource={[
                  {
                    title: '债券',
                    key: '1',
                    content: <TableC columns={columns} dataSource={dataSource} hidePage={true} />,
                  },
                ]}
                activeKey={this.state.tabType1}
                onChange={(key) => {
                  this.setState({
                    tabType1: key,
                  });
                }}
              />
            </ModalC>
          </div>
          <div className='echarts'>{this.showEchartsThree()}</div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(ShowEchartsThree);
